<template>
    <div>
         <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
       <el-row>
           <el-col>
               <el-button type="primary">添加角色</el-button>
           </el-col>
       </el-row>

       <el-table :data="showRoles"  style="width: 100%" type="index" border >
             <el-table-column type="expand">
                 <!-- 权限管理开始 -->
                 <template slot-scope="scope">
                     <!-- 渲染一级权限管理 -->
                     <el-row  v-for="(item1, index) in scope.row.children" :key="index"
                        :class="['bdbottom',index==0?'bdtop':'','center']">
                         <el-col :span='5' >
                             <el-tag>{{item1.authName}}</el-tag>
                             <i class="el-icon-arrow-right"></i>
                         </el-col>
                         <el-col :span='19'>
                             <!-- 渲染二级权限管理 -->
                             <el-row v-for="(item2, index2) in item1.children" :key="index2"
                             :class="'center'">
                                 <el-col :span="6" >
                                      <el-tag>{{item2.authName}}</el-tag>
                                      <i class="el-icon-arrow-right"></i>
                                 </el-col>
                                 <el-col :span="18">
                                     <el-tag v-for="(item3, index3) in item2.children" :key="index3" closable
                                     @close="remove(scope.row,item3.id)">
                                            {{item3.authName}} 
                                     </el-tag>
                                 </el-col>
                             </el-row>
                         </el-col>
                     </el-row>
                 </template>
            </el-table-column>
             <el-table-column type="index">

            </el-table-column>
            <el-table-column  prop="roleName" label="角色名称">
       
            </el-table-column>
            <el-table-column prop="roleDesc" label="角色描述">
       
            </el-table-column>
            <el-table-column  label="操作" width='300px'>
                <template slot-scope="scope">
                   <el-button size="mini" type="primary" icon="el-icon-search">编辑</el-button>
                   <el-button size="mini" type="primary" icon="el-icon-search">删除</el-button>
                   <el-button size="mini" type="primary" icon="el-icon-search" @click="fenpei(scope.row)">分配权限</el-button>
                </template>
            </el-table-column>
    </el-table>
    </el-card>

    <!-- 分配权限的结构 -->
    <el-dialog
        title="提示"
        :visible.sync="fenpeiShow"
        width="30%">
        <!-- 树形结构开始 -->
        <el-tree :data="fenpeiArray" :props="defaultProps" show-checkbox default-expand-all
        node-key="id" :default-expanded-keys="defKeys">
        </el-tree>

        <span slot="footer" class="dialog-footer">
            <el-button @click="fenpeiShow = false">取 消</el-button>
            <el-button type="primary" @click="fenpeiShow = false">确 定</el-button>
        </span> 
</el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            showRoles:[],
            fenpeiShow:false,
            fenpeiArray:[],
            defaultProps: {
          children: 'children',
          label: 'authName',
        },
        defKeys:[]
        }
    },
    created(){
        this.show()
    },
    methods:{
        async show(){
            console.log(123456)
            const {data:res}=await this.$http.get('roles')
            if(res.meta.status==200){
                this.showRoles=res.data
                console.log(this.showRoles)
            }
        },
        async remove(roleid,rightsid){
            const result=await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        // console.log(result)
        if(result=='cancel'){
            return console.log('取消了删除操作')
        }
            console.log(roleid.id)
            // 执行确定删除的请求
            const {data:res}=await this.$http.delete(`roles/${roleid.id}/rights/${rightsid}`)
            // console.log(res)
            // 删除之后吧最新的数据 给角色
            roleid.children=res.data
        },
        // 分配权限的函数开始了
        async fenpei(row){
           const {data:res}=await this.$http.get('rights/tree')
        //    console.log(res)
        if(res.meta.status==200){
            this.fenpeiArray=res.data
            this.diGui(row,this.defKeys)
        }   
            
            console.log(this.defKeys)
            this.fenpeiShow=true
            // console.log( this.fenpeiShow )
        },
        diGui(node,arr){
            if(!node.children){
               
               return arr.push(node.id)
            }
            node.children.forEach(element => 
                this.diGui(element,arr));
        }
    }
}
</script>
<style>

.el-row{
    /* margin-top: 15px; */
    /* margin-bottom: 15px; */
}
.bdtop{
    border-top: 1px solid #000;
}
.bdbottom{
    border-bottom: 1px solid #000;
}
.center{
    display: flex;
    align-items: center;
}
</style>
